<!--  -->
<template>
<div class="main">
  <van-nav-bar
  title="筛选"
  left-text="取消"
  right-text="重置"
 
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>
<van-notice-bar class="notice"
  wrapable
  :scrollable="false"
>
您选择了:{{stringListtext}}
     
</van-notice-bar>
<div class="classdiv">
    <van-sidebar v-model="classifyKey">
      <!-- 遍历渲染主类 -->
      <van-sidebar-item
        v-for="(item, i) in classify"
        :key="i"
        @click="classSwitch(i)"
        :title="item.text" />
    </van-sidebar>
    <div class="van-sku-group-container">
     
      <!-- 遍历渲染二级分类 -->
      <div class="van-sku-row van-hairline--bottom" v-for="(cate,i) in category" :key="i">
        <div v-if="cate.children.length<=0">
          <span class="van-sku-row__item">
            <div class="van-sku-row__item-name" :class="{'van-sku-row__item--active': gather.indexOf(cate.id) > -1 }"
              @click="onPitch(cate)"> {{cate.text}}</div>
            {{cate.text}}
          </span>
        </div>
      
        <div v-if="cate.children.length >0 " ref="abc" class="van-sku-row__title">{{cate.text}}</div>
        <span v-for="(type,i) in cate.children" :key="i" class="van-sku-row__item">
          <div class="van-sku-row__item-name" :class="{'van-sku-row__item--active' : gather.indexOf(type.id) > -1 }"
            @click="onPitch(type)"> {{type.text}}</div>
        </span>
      </div>
    </div>

  </div>


  <div class="van-coupon-list__bottom">
    <div class="van-action-sheet__gap"></div>
    <button type="button" @click="clssearch" class="van-action-sheet__cancel">确定</button>
  </div>
</div>
</template>

<script>
import yjglconfig from  '@/utils/yjglconfig'
export default {
  name:'emclass',
  components: {},
  props:{},
  data () {
  return {
      activeId: 1,
      activeIndex: 0,
      // 主类
      classify: [],
      classifyKey: 0,
      // 侧边内容
      category: [],
      gather: [], //选中集合数组
      gathertext:[],//选中集合数组描述
      stringList: null, //选中集合数组转换成字符串
      stringListtext: null //选中集合数组转换成字符串
    }
  },
  computed: {},
  watch: {},
  created() {
     
  },
  mounted() { 
    this.classify = yjglconfig.totalcls
    this.classSwitch(0)
  },
  methods: {
    classSwitch(i) { // 点击主类级别导航切换

      // 根据i进行二级菜单筛选
      this.category = this.classify[i].children
    },
    onPitch(item) {

      let subscripttext = this.gathertext.indexOf(item.text);
      let subscript = this.gather.indexOf(item.id); //indexOf:返回某个指定的字符串值在字符串中首次出现的位置

      if (subscripttext > -1) {
        this.gathertext.splice(subscript, 1); //splice:用于添加或删除数组中的元素
      } else {
        this.gathertext.push(item.text); //通过push方法将选中id添加到数组中
      }

      this.stringListtext = this.gathertext.join(',') //转换成字符串并以逗号隔开

      if (subscript > -1) {
        this.gather.splice(subscript, 1); //splice:用于添加或删除数组中的元素
      } else {
        this.gather.push(item.id); //通过push方法将选中添加到数组中
      }

      this.stringList = this.gather.join(',') //转换成字符串并以逗号隔开

    },
    onClickLeft() {
      this.$emit('close');
    },
    onClickRight() {
      this.gather = [];
      this.gathertext = [];
      this.stringListtext = '';
    },
    clssearch() {
     // console.log(this.gather);
      this.$emit('close');
      this.$emit('clssearch', this.gather);
    }
  }

}


</script>
<style lang='less' scoped>

div.classdiv{
  margin-top: 2px;
  display: flex;
}
div.main {
  // display: flex;
 
}
.category{
  margin-top: 10px;
  margin-left: 10px;
  max-width: 70%;
}
div.main .emcls{
  font-size: 12px;
}
.emclsp{
  font-size: 14px;
  border-bottom: 1px solid #ebedf0;
}
.van-sku-container{
   max-width: 70%;
  font-size: 14px;
}
.van-sku-group-container{
  max-width: 70%;
  font-size: 14px;

}
 /deep/.van-sku-row__item{
  font-size: 13px;
}
.van-sku-row__item-name {
    z-index: 1;
    padding: 8px;
}
.notice{
  font-size: 12px;
}
</style>